<script lang="ts" setup>
const props = defineProps({
  enableContactInfo: {
    type: Boolean,
    default: false,
  },
  enableUserRemark: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

// 联系方式
const userForm = reactive({
  name: "",
  phone: "",
  userRemark: "",
});

defineExpose({
  getContactInfo: () => {
    return {
      name: userForm.name,
      phone: userForm.phone,
    };
  },
  getUserRemark: () => {
    return userForm.userRemark;
  },
});
</script>

<template>
  <nut-form>
    <h3 class="pl-4 pt-3 text-lg c-gray-7">附加信息</h3>
    <template v-if="enableContactInfo">
      <nut-form-item label="姓名">
        <nut-input
          class="nut-input-text"
          v-model="userForm.name"
          placeholder="请输入姓名"
          type="text"
          :disabled="disabled"
        />
      </nut-form-item>
      <nut-form-item label="联系电话">
        <nut-input
          class="nut-input-text"
          v-model="userForm.phone"
          placeholder="请输入联系电话"
          type="text"
          :disabled="disabled"
        />
      </nut-form-item>
    </template>
    <template v-if="enableUserRemark">
      <nut-form-item label="备注">
        <nut-textarea
          v-model="userForm.userRemark"
          autosize
          placeholder="请输入备注"
          limit-show
          max-length="50"
          :rows="3"
          :disabled="disabled"
        />
      </nut-form-item>
    </template>
  </nut-form>
</template>
